<template>
  <div class="function-config">
    <el-dialog
      :visible.sync="isShow"
      @close="triggerClose"
      :close-on-click-modal="false"
      @opened="triggerOpen"
      width="768px"
    >
      <div class="function-content" v-loading="functionLoading">
        <el-row :gutter="0" style="height: 5%;color: #999999">
          <el-col :span="18">可选常用功能</el-col>
          <el-col :span="6">当前选定常用功能（可排序）</el-col>
        </el-row>
        <el-row :gutter="0" style="height: 95%">
          <el-col :span="18" style="height: 100%">
            <el-scrollbar class="el-scrollbar-function-config">
              <div v-for="(root, index) in functionList" :key="index" class="function-left-list">
                <div class="function-root">{{root.systemName}}</div>
                <el-row :gutter="0">
                  <el-col
                    v-for="(item, index) in root.children"
                    :key="index"
                    :span="6"
                    class="function-col"
                  >
                    <el-checkbox
                      @change="changeCheck(item)"
                      v-model="item.isCheck"
                    >{{item.systemName}}</el-checkbox>
                  </el-col>
                </el-row>
              </div>
            </el-scrollbar>
          </el-col>
          <el-col :span="6" style="height: 100%">
            <el-scrollbar class="el-scrollbar-function-config">
            <draggable
              class="function-draggable"
              v-model="draggableList"
              :options="{animation:100, filter: '.close'}"
            >
              <div v-for="(element, index) in draggableList" :key="index" class="draggable-item">
                <div>{{element.systemName}}</div>
                <div class="close" title="删除" @click="triggerRemove(element, true)">
                  <i class="el-icon-close"></i>
                </div>
              </div>
            </draggable>
            </el-scrollbar>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm('function')"
          :loading="submiting"
          class="loading-submiting"
        >保存</el-button>
      </div>
      <div slot="title" class="dialog-edit-head">
        <i>设置显示常用功能</i>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import * as Constant from '@/util/constant'
// import { COMMON } from '@/util/commonUtil'
import Submiting from '@/mixins/Submiting'
import draggable from 'vuedraggable'
import { ALERT } from '@/utils/responseHandle'
import _remove from 'lodash/remove'
export default {
  /**
   * 自定义常用功能配置
   */
  name: 'FunctionConfig',
  props: {
    functionLoading: {
      type: Boolean,
      default: false
    },
    functionDislogVisible: {
      type: Boolean,
      default: false
    },
    functionList: { // 可使用功能
      type: Array,
      default: () => { return [] }
    },
    functionUses: { // 已使用的功能
      type: Array,
      default: () => { return [] }
    }
  },
  data () {
    return {
      isShow: this.functionDislogVisible,
      draggableList: []
    }
  },
  components: { draggable },
  mixins: [Submiting],
  created () {
  },
  methods: {
    triggerOpen () { // 打开dislog
    },
    triggerClose () { // 关闭dislog
    },
    changeCheck (item) { // 勾选
      if (item.isCheck) {
        this.triggerAdd(item)
      } else {
        this.triggerRemove(item, false)
      }
    },
    triggerAdd (item) { // 添加已选中列表
      let i = {
        systemName: item.systemName,
        systemInfoId: item.id,
        systemConfigType: item.systemType
      }
      this.draggableList.push(i)
    },
    triggerRemove (v, d) { // 删除已选中列表 v: 当前要删除的项，d: 需要设置 functionList 的isCheck
      let systemInfoId = d ? v.systemInfoId : v.id
      _remove(this.draggableList, (item) => {
        return systemInfoId === item.systemInfoId
      })
      if (d) {
        this.functionList.forEach((itemLevel1, index) => {
          itemLevel1.children.forEach((itemLevel2) => {
            if (systemInfoId === itemLevel2.id) {
              itemLevel2.isCheck = false
              return true
            }
          })
        })
      }
      this.draggableList = JSON.parse(JSON.stringify(this.draggableList))
    },
    submitForm () { // 提交
      this.openSubmiting()
      let draggableList = this.draggableList.map(function (item, index) {
        return {
          systemInfoId: item.systemInfoId,
          systemConfigType: item.systemConfigType,
          orderIndex: index + 1
        }
      })
      this.$emit('submitForm', draggableList)
    }
  },
  watch: {
    functionDislogVisible: {
      immediate: true,
      handler () {
        this.isShow = this.functionDislogVisible
      }
    },
    isShow () {
      if (!this.isShow) {
        this.$emit('closeFunctionConfig')
      } else {
        let draggableList = JSON.parse(JSON.stringify(this.functionUses))
        _remove(draggableList, (item) => {
          return '100' === item.systemInfoId
        })
        this.draggableList = draggableList
      }
    },
    functionUses: {
      immediate: true,
      handler () {
        let draggableList = JSON.parse(JSON.stringify(this.functionUses))
        _remove(draggableList, (item) => {
          return '100' === item.systemInfoId
        })
        this.draggableList = draggableList
      }
    }
  }
}
</script>
<style lang="scss">
.function-config {
  .el-dialog__body {
    padding: 10px 15px 0px 15px;
  }
  .function-content {
    height: 520px;
    .function-left-list {
      border-right: 1px solid #ebeef5;
      .function-root {
        color: #333333;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .function-col {
        margin-bottom: 10px;
      }
    }
    .function-draggable {
      padding-left: 15px;
      padding-right: 10px;
      .draggable-item {
        line-height: 2;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-direction: row;
        flex-wrap: none; // 不允许换行
        justify-content: space-between;
        &:hover {
          cursor: move;
          // background-color: #eee;
        }
        .close {
          &:hover {
            cursor: pointer;
          }
        }
      }
      .sortable-chosen {
        background-color: #eee;
      }
      .sortable-ghost {
        background-color: #eee;
      }
    }
  }
  .el-scrollbar-function-config {
    height: 100%;
    width: 100%;
  }
  .el-scrollbar-function-config .el-scrollbar__wrap {
    overflow-x: auto;
  }
  .loading-submiting {
    .el-icon-loading {
      font-size: 14px !important;
    }
  }
}
</style>
